<template>
  <div class="search-box">
    <div class="top">
      <div class="left">
        <el-icon><Search /></el-icon>
        <span>筛选搜索</span>
      </div>
      <div class="right">
        <el-button @click="reset">重置</el-button>
        <el-button type="primary" @click="getUserRoleList">查询搜索</el-button>
      </div>
    </div>
    <div class="bottom">
      <span>账号/姓名: </span>
      <input
        v-model="queryParams.keyword"
        type="text"
        placeholder="请输入账号、姓名"
      />
    </div>
  </div>
  <div class="dataList">
    <div class="left">
      <el-icon><Tickets /></el-icon>
      <span>数据列表</span>
    </div>
    <div class="right">
      <el-button type="primary" @click="showDialog = true">添加</el-button>
    </div>
  </div>
  <el-table :data="userRoleList" border>
    <el-table-column prop="id" label="编号" />
    <el-table-column prop="name" label="角色名称" />
    <el-table-column prop="description" label="描述" />
    <el-table-column prop="sort" label="用户数" />
    <el-table-column prop="createTime" label="添加时间">
      <template #default="{ row }">
        <span>
          {{ formatDate(row.createTime) }}
        </span>
      </template>
    </el-table-column>
    <el-table-column label="是否启用">
      <template #default="{ row }">
        <el-switch v-model="row.status" :active-value="1" :inactive-value="0" />
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-button
          link
          type="primary"
          size="small"
          @click="router.push('/ums/allocMenu?id=' + row.id)"
          >分配菜单</el-button
        >
        <el-button
          link
          type="primary"
          size="small"
          @click="router.push('/ums/allocResource?id=' + row.id)"
          >分配资源</el-button
        >
        <el-button link type="primary" size="small" @click="editRole(row)"
          >编辑</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <ElConfigProvider :locale="zhCn">
    <div class="paging">
      <el-pagination
        v-model:current-page="queryParams.pageNum"
        v-model:page-size="queryParams.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="getUserRoleList"
        @current-change="getUserRoleList"
      />
    </div>
  </ElConfigProvider>
  <editRoleVue
    :show="showDialog"
    @hide="hideDialog"
    :id="roleId"
    :data="editUserRole"
  />
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import { userRoleListAPI } from "./api";
import { Search, Tickets } from "@element-plus/icons-vue";
import { ElConfigProvider } from "element-plus";
import { formatDate } from "@/utils";
import editRoleVue from "./editRole.vue";
//语言国际化
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { useRouter } from "vue-router";

//路由
const router = useRouter();

//是否显示添加角色对话框
const showDialog = ref(false);
//分配角色id
const roleId = ref(0);
//编辑角色信息
const editUserRole = reactive<IRoleModel>({
  name: "",
  description: "",
  status: 0,
  id: 0,
});
//控制添加角色对话框显示隐藏
const hideDialog = (reload?: boolean) => {
  showDialog.value = false;
  roleId.value = 0;
  editUserRole.name = "";
  editUserRole.description = "";
  editUserRole.status = 0;
  editUserRole.id = 0;

  //确认的时候才需要刷新
  if (reload) {
    //刷新数据
    getUserRoleList();
  }
};
//编辑
const editRole = (row: IRoleModel) => {
  showDialog.value = true;
  roleId.value = row.id as number;
  Object.assign(editUserRole, row);
};

//请求参数
const queryParams = reactive<IUserParams>({
  keyword: "",
  pageNum: 1,
  pageSize: 10,
});
//重置
const reset = () => {
  queryParams.keyword = "";
  getUserRoleList();
};
//用户角色列表数据
const userRoleList = ref<IRoleModel[]>([]);
//总共多少条数据
const total = ref(0);

// 封装用户角色请求
const getUserRoleList = () => {
  //获取所有用户角色请求
  userRoleListAPI(queryParams).then((res) => {
    if (res.code === 200) {
      userRoleList.value = res.data.list;
      total.value = res.data.total;
    }
  });
};
//页面一进来先调用获取数据
getUserRoleList();
</script>
<style lang="less" scoped>
//表格
:deep(.cell) {
  text-align: center;
}
//搜索
.search-box {
  box-shadow: 0 0 2px 2px #ccc;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  font-size: 14px;
  box-sizing: border-box;
  height: 132px;
  .top {
    padding: 10px 0 0 0;
    display: flex;
    justify-content: space-between;
    span {
      margin-left: 10px;
      color: #303133;
    }
  }
  .bottom {
    display: flex;
    padding: 10px 40px 30px 40px;
    height: 32px;
    line-height: 32px;
    color: #606266;

    input {
      margin-left: 12px;
      width: 200px;
      background-color: #fff;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      box-sizing: border-box;
      color: #606266;
      padding: 0 15px;
    }
  }
}
//数据列表
.dataList {
  height: 61px;
  padding: 0 20px 0;
  box-sizing: border-box;
  margin-bottom: 20px;
  box-shadow: 0 0 2px 2px #ccc;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .left {
    span {
      margin-left: 10px;
    }
  }
}
//分页
.paging {
  padding: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
